<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" media="screen and (min-width:768px)" href="../overview/overview.css">
    <link rel="stylesheet" href="../css/swiper-bundle.css">
    <link rel="stylesheet" media="screen and (max-width:768px)" href="../overview/over.css">
    <script src="../js/swiper-bundle.js"></script>
    <script src="../js/jquery-3.6.4.min.js"></script>
    <script src="../jq/jquery-1.12.4.js"></script>
</head>

<body>
    <div id="over">

    
    <!-- 导航栏 -->
    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
        <img src="../image/隐藏.png" alt="">
    </label>
    <div class="nav">
        <div class="nav-img">
            <img src="../image/2-min.png" alt="">
        </div>
        <div class="nav-word">
            <ul>
                <li><a href="../index/index.html">首页</a></li>
                <li><a href="../overview/overview.html">部门概况</a></li>
                <li><a href="#item2">师资队伍</a></li>
                <li><a href="#item3">思政建设</a></li>
                <li><a href="#item4">红馆</a></li>
                <li><a href="#item5">心理健康教育中心</a></li>
                <li><a href="#item6">教学科研</a></li>
                <li><a href="#item7">学生社团</a></li>
            </ul>
            <div class="nav-serch">
                <!-- <input type="text" placeholder="请输入关键词搜索"> -->
                <img src="../image/搜索.png" alt="">
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
        <img src="../image/部门概况.jpg" alt="">      
    </div>
    <!-- 导航栏 -->
    <div class="overview">
        <div class="over">
            <div class="over-nav">
                <ul>
                    <li><a href="#" data-target="item1">部门概况</a><span> > </span></li>
                    <li><a href="#" data-target="item2">师资队伍</a><span> > </span></li>
                    <li><a href="#" data-target="item3">思政建设</a><span> > </span></li>
                    <li><a href="#" data-target="item4">红馆</a><span> > </span></li>
                    <li><a href="#" data-target="item5">心理健康教育中心</a><span> > </span></li>
                    <li><a href="#" data-target="item6">教学科研</a><span> > </span></li>
                    <li><a href="#" data-target="item7">学生社团</a><span> > </span></li>
                </ul>
            </div>
            <div class="over-content">
                <!-- 部门概况 -->
                <div id="item1" class="page">
                    <div class="over-top">
                        <div class="over-left">部门概况</div>
                        <div class="over-right">
                            <img src="../image/定位.png" alt="">
                            <text>当前所在位置：首页 > 部门概况</text>
                        </div>
                    </div>
                    <div class="over-center">
                        <h1>部门概况</h1>
                        <div class="over-text">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲
                            台育英才，一方舞台辰风采课比天大，是一幅字、一块匾，是心照不言的默契三尺讲台育英才，一
                            方舞台展风采。“课比天大，是一幅字、一块画，是心照不宣的默契三尺讲台育英才，一方舞台展风
                            采课比天大，是一幅字、一块厍，是心照不宣的默契三尺讲台育英才，一方舞台展风采。“课比天
                            大，是一幅字、一块品，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一帽
                            字、一块丽，是心照不宣的默契三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块
                            匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不
                            宫的默契三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块隔，是心照不宣的默契三
                            尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块隔，是心照不宣的默契。<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲
                            台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不言的默契三尺讲台育英才，一
                            方费台辰风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风
                            采课比天大，是一幅字、一块愿，是心照不言的默契三尺讲台育英才，一方舞台展风采。“课比天
                            大，是一幅字、一块丽，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅
                            字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块
                            匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不
                            宣的默契三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三
                            尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块原，是心照不言的默契。<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲
                            台育英才，一方舞台展风采课比天大，是一幅字、一块画，是心照不言的默契三尺讲台育英才，一
                            方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风
                            采课比天大，是一幅字、一块，是心照不宣的默契三尺讲台奇英才，一方舞台展风采。“课比天
                            大，是一幅字、一块雨，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅
                            字、一块丽，是心照不宫的默契三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块
                            属，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不
                            宣的默契三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三
                            尺讲台育英才，一方赛台展风采课比天大，是一帽字、一块隔，是心照不言的默契。<br />
                        </div>
                    </div>
                </div>
                <!-- 师资队伍 -->
                <div id="item2" class="page">
                    <div class="over-top">
                        <div class="over-left">师资队伍</div>
                        <div class="over-right">
                            <img src="../image/定位.png" alt="">
                            <text>当前所在位置：首页 > 师资队伍</text>
                        </div>
                    </div>
                    <div class="btn-img">
                        <img class="btn-img1" src="../image/1-1.png" alt="">
                        <img class="btn-img2" src="../image/1-2.png" alt="">
                        <img class="btn-img3" src="../image/1-3.png" alt="">
                    </div>
                    <!-- 2 -->
                    <div class="over-all">
                        <div class="over-btn1">
                            <div class="content-btn1">
                                <div class="btn1">
                                    <img src="../image/3-min.png" alt="">
                                    <h3>传承八一精神 凝聚奋进力量|马克思主义学院第一第二党支部开展主题...</h3>
                                    <div class="btn-bottom">
                                        <img src="../image/时钟.png" alt="">
                                        <text>2021-04-17</text>
                                    </div>
                                </div>
                            </div>
                            <div class="content-btn1">
                                <div class="btn1">
                                    <img src="../image/3-min.png" alt="">
                                    <h3>传承八一精神 凝聚奋进力量|马克思主义学院第一第二党支部开展主题...</h3>
                                    <div class="btn-bottom">
                                        <img src="../image/时钟.png" alt="">
                                        <text>2021-04-17</text>
                                    </div>
                                </div>
                            </div>
                            <div class="content-btn1">
                                <div class="btn1">
                                    <img src="../image/3-min.png" alt="">
                                    <h3>传承八一精神 凝聚奋进力量|马克思主义学院第一第二党支部开展主题...</h3>
                                    <div class="btn-bottom">
                                        <img src="../image/时钟.png" alt="">
                                        <text>2021-04-17</text>
                                    </div>
                                </div>
                            </div>
                            <div class="content-btn1">
                                <div class="btn1">
                                    <img src="../image/3-min.png" alt="">
                                    <h3>传承八一精神 凝聚奋进力量|马克思主义学院第一第二党支部开展主题...</h3>
                                    <div class="btn-bottom">
                                        <img src="../image/时钟.png" alt="">
                                        <text>2021-04-17</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 查看更多 -->
                        <div class="much">
                            查看更多
                            <img src="../image/右箭头.png" alt="">
                        </div>
                    </div>
                    <!-- 1 -->
                    <div class="over-center2">
                        <ul>
                            <li>
                                <div class="flex">
                                    <a href="#">山东城院召开公文写作培训会</a>
                                    <div class="item2-right">
                                        <img src="../image/时间.png" alt="">
                                        <text>2022-11-24</text>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="flex">
                                    <a href="#">山东城院召开公文写作培训会</a>
                                    <div class="item2-right">
                                        <img src="../image/时间.png" alt="">
                                        <text>2022-11-24</text>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="flex">
                                    <a href="#">山东城院召开公文写作培训会</a>
                                    <div class="item2-right">
                                        <img src="../image/时间.png" alt="">
                                        <text>2022-11-24</text>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="flex">
                                    <a href="#">山东城院召开公文写作培训会</a>
                                    <div class="item2-right">
                                        <img src="../image/时间.png" alt="">
                                        <text>2022-11-24</text>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="flex">
                                    <a href="#">山东城院召开公文写作培训会</a>
                                    <div class="item2-right">
                                        <img src="../image/时间.png" alt="">
                                        <text>2022-11-24</text>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="flex">
                                    <a href="#">山东城院召开公文写作培训会</a>
                                    <div class="item2-right">
                                        <img src="../image/时间.png" alt="">
                                        <text>2022-11-24</text>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="flex">
                                    <a href="#">山东城院召开公文写作培训会</a>
                                    <div class="item2-right">
                                        <img src="../image/时间.png" alt="">
                                        <text>2022-11-24</text>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <!-- 查看更多 -->
                        <div class="much">
                            查看更多
                            <img src="../image/右箭头.png" alt="">
                        </div>
                    </div>
                    <!-- 3 -->
                    <div class="over-content-3">
                        <div class="overcon">
                            <div class="overcon1">
                                <img src="../image/3-min.png" alt="">
                            </div>
                            <div class="overcon2">
                                <h3>传承八一精神 凝聚奋进力量|马克思主义学院第一第二党支部开展主题...</h3>
                                <div class="overcon3">
                                    <img src="../image/时间.png" alt="">
                                    <text>2021-05-21</text>
                                </div>
                            </div>
                        </div>
                        <div class="overcon">
                            <div class="overcon1">
                                <img src="../image/3-min.png" alt="">
                            </div>
                            <div class="overcon2">
                                <h3>传承八一精神 凝聚奋进力量|马克思主义学院第一第二党支部开展主题...</h3>
                                <div class="overcon3">
                                    <img src="../image/时间.png" alt="">
                                    <text>2021-05-21</text>
                                </div>
                            </div>
                        </div>
                        <div class="overcon">
                            <div class="overcon1">
                                <img src="../image/3-min.png" alt="">
                            </div>
                            <div class="overcon2">
                                <h3>传承八一精神 凝聚奋进力量|马克思主义学院第一第二党支部开展主题...</h3>
                                <div class="overcon3">
                                    <img src="../image/时间.png" alt="">
                                    <text>2021-05-21</text>
                                </div>
                            </div>
                        </div>
                        <div class="overcon">
                            <div class="overcon1">
                                <img src="../image/3-min.png" alt="">
                            </div>
                            <div class="overcon2">
                                <h3>传承八一精神 凝聚奋进力量|马克思主义学院第一第二党支部开展主题...</h3>
                                <div class="overcon3">
                                    <img src="../image/时间.png" alt="">
                                    <text>2021-05-21</text>
                                </div>
                            </div>
                        </div>
                        <div class="overcon-1">
                            <div class="overcon1">
                                <img src="../image/3-min.png" alt="">
                            </div>
                            <div class="overcon2">
                                <h3>传承八一精神 凝聚奋进力量|马克思主义学院第一第二党支部开展主题...</h3>
                                <div class="overcon3">
                                    <img src="../image/时间.png" alt="">
                                    <text>2021-05-21</text>
                                </div>
                            </div>
                        </div><div class="overcon-1">
                            <div class="overcon1">
                                <img src="../image/3-min.png" alt="">
                            </div>
                            <div class="overcon2">
                                <h3>传承八一精神 凝聚奋进力量|马克思主义学院第一第二党支部开展主题...</h3>
                                <div class="overcon3">
                                    <img src="../image/时间.png" alt="">
                                    <text>2021-05-21</text>
                                </div>
                            </div>
                        </div>
                        <!-- 查看更多 -->
                        <div class="much">
                            查看更多
                            <img src="../image/右箭头.png" alt="">
                        </div>
                    </div>
                </div>
                <div id="item3" class="page">
                    <div class="over-top">
                        <div class="over-left">思政建设</div>
                        <div class="over-right">
                            <img src="../image/定位.png" alt="">
                            <text>当前所在位置：首页 > 思政建设</text>
                        </div>
                    </div>
                </div>
                <div id="item4" class="page">
                    <div class="over-top">
                        <div class="over-left">红馆</div>
                        <div class="over-right">
                            <img src="../image/定位.png" alt="">
                            <text>当前所在位置：首页 > 红馆</text>
                        </div>
                    </div>
                </div>
                <div id="item5" class="page">
                    <div class="over-top">
                        <div class="over-left">心理健康教育中心</div>
                        <div class="over-right">
                            <img src="../image/定位.png" alt="">
                            <text>当前所在位置：首页 > 心理健康教育中心</text>
                        </div>
                    </div>
                </div>
                <div id="item6" class="page">
                    <div class="over-top">
                        <div class="over-left">教学科研</div>
                        <div class="over-right">
                            <img src="../image/定位.png" alt="">
                            <text>当前所在位置：首页 > 教学科研</text>
                        </div>
                    </div>
                </div>
                <div id="item7" class="page">
                    <div class="over-top">
                        <div class="over-left">学生社团</div>
                        <div class="over-right">
                            <img src="../image/定位.png" alt="">
                            <text>当前所在位置：首页 > 学生社团</text>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 脚部 -->
        <div class="footer">
            <div class="footer-content">
                <img class="footer-left" src="../image/2-min.png" alt="">
                <text>地址:山东省烟台市高新区海天路1001号</text>
                <text>办公室电话：0535-293876</text>
                <div class="footer-right">
                    <img class="footer-right1" src="../image/二维码.jpg" alt="">
                    <div class="footer-text">微信公众号</div>
                </div>
            </div>
            <div class="footer-color">
                Copyright C山东省城市服务技师学院版权所有
            </div>
        </div>
    </div>
</body>
<script stype="text/javascript">
    var mySwiper = new Swiper('.swiper', {
        autoplay: {
            delay: 2000,
        },
        loop: true,//循环模式选项
        // 如果需要滚动条
        pagination: {
            el: '.swiper-pagination',
        },
    })

    $(document).ready(function () {
        // 给左侧菜单栏添加点击事件
        $(".over-nav ul a").click(function () {
            var target = $(this).data('target');
            // 隐藏所有页面内容
            $('.page').hide();
            // 显示目标页面内容
            $('#' + target).show();
        })
        // 显示默认的页面
        $('#item1').show();
        $(' .btn-img .btn-img1').click(function () {
            console.log(123);
            $('.over-center2').show();
            $('.over-all').hide();
            $('.over-content-3').hide();
        })
        // 显示默认的页面
        $('.over-center2').show();
        $(' .btn-img .btn-img2').click(function () {
            $('.over-center2').hide();
            $('.over-all').show();
            $('.over-content-3').hide();
        })
        $(' .btn-img .btn-img3').click(function () {
            $('.over-center2').hide();
            $('.over-all').hide();
            $('.over-content-3').show();
        })
    })
    $(function () {
        $('.checkbtn img').click(function () {
            $('.nav-word').toggle();
        })
    })
</script>

</html>